// createRouter：这是 Vue Router 提供的一个函数，用于创建路由实例。
// createWebHashHistory：该函数用于创建基于哈希模式的路由历史记录。哈希模式使用 URL 中的哈希值（如 http://example.com/#/path）来管理路由。
// HomeView、UserView、BookView 和 IndexView：这些是导入的 Vue 组件，会在路由匹配时被渲染。

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import UserView from '@/views/main/UserView.vue'
import BookView from '@/views/main/BookView.vue'
import IndexView from '@/views/main/IndexView.vue'

// createRouter 函数接收一个配置对象作为参数，该对象包含以下属性：
// history：指定路由的历史记录模式。这里使用 createWebHashHistory 创建了一个哈希模式的历史记录，import.meta.env.BASE_URL 是应用的基础 URL。
// routes：这是一个路由配置数组，定义了应用的路由规则。
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // path:定义根路径的匹配规则。
    // name: 定义路由名称，方便在代码中通过名称进行路由跳转。
    // component: HomeView：指定当路径匹配组件。
    // children：子路由配置数组，定义该路由下的子路由规则。
    {
      path: '/',
      name: 'home',
      component: HomeView,
      // /user、/index 和 /book 是 HomeView 的子路由。当访问这些路径时，会在 HomeView 组件的基础上渲染相应的子组件
      children: [
        {
          path: '/user',
          name: 'user',
          component: UserView,
          children: [
            {
              path: '/user/detail',
              name: 'detail',
              component: () => import('@/views/main/user/UserDetailsView.vue'),
            },
          ]
        }, {
          path: '/index',
          name: 'index',
          component: IndexView,

        }, {
          path: '/book',
          name: 'book',
          component: BookView,

        },
      ]
    },
    // /about 和 /login 是独立的路由
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/AboutView.vue'),
      // 动态导入
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/LoginView.vue'),
    },
  ],
})

// 指定模块的默认导出,将该路由实例挂载到 Vue 实例上，从而实现路由功能
export default router